
<template>
  <div id="app" style="margin: 200px; background-color: white">
    <div class="mr-cont" v-model="product">
      <!--插入图片-->
      <div class="mr-pic" style="width: 1200px">
        <el-row gutter="20">
          <el-col span="12">
            <el-card style=":width 600px;height: 600px">
              <img :src="product.url" width="100%" alt="">
            </el-card>
          </el-col>
          <el-col span="12" style="margin-top: 10px">
            <div style="width: 100px;height: 30px;border-radius: 6px;background-color: #42b983;line-height: 30px">
              幸运果商城
            </div>
            <p style="font-size: 25px">
              商品标题:{{ product.name }}
            </p>
            <el-divider></el-divider>
            <p style="font-size: 15px;color: #666">
              商品介绍:{{ product.intro }}
              <span style="float: right">{{ product.created }}</span>
            </p>
            <p style="font-size: 25px;font-weight: bold;">
              现价:{{ product.price }}
              <span style="font-size: 15px;color: #666">原价:<s>{{ product.oldPrice }}</s></span>
            </p>
            <div style="width: 100px;height: 200px;border: 1px red">
            </div>
            <el-button type="danger" style="" @click="handleAdd">立即购买</el-button>

            <el-dialog title="收货信息" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="收件人" :label-width="formLabelWidth">
                  <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth">
                  <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                  <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')" v-if="isAdd">购买</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
              </div>
            </el-dialog>
            <el-button type="danger" @click="insertCart()"><i class="el-icon-shopping-cart-full"></i>加入购物车</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>


</template>


<script>
export default {
  data() {
    return {
      order: {
        userid:"",
        productid:"",
        productname:"",
        picture:"",
        buynum:"1",
        price:"",
        address:"",
        total:"",
        tablename:"",
        consignee:"",
        phone:""
      },
      isAdd: true,
      formLabelWidth: '120px',
      form: {},
      product: {},
      ruleForm: {},
      cartData: {
        productid: "",
        productname: "",
        price: "",
        buynum: "1",
        userid: "",
        picture: "",

      },
      dialogFormVisible: false
    };
  }, methods: {
    submitForm() {
      let jwt = localStorage.getItem("jwt")
      const decode = this.jwt_decode(jwt);
      let url = 'http://localhost:8090/orders/add-new';
      this.order.userid = decode.id;
      this.order.productid=this.product.id;
      this.order.address=this.form.address;
      this.order.productname=this.product.name;
      this.order.price=this.product.price;
      this.order.total=this.product.price;
      this.order.picture=this.product.url;
      this.order.consignee = this.form.username;
      this.order.phone = this.form.phone;
      console.log(this.order)
      let formData = this.qs.stringify(this.order);
      console.log('formData：' + formData);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '添加成功！',
            type: 'success',

          });
          this.$router.push("/index/order");
          this.resetForm(formName);

        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    handleAdd() {
      this.dialogFormVisible = true;
      let jwt = localStorage.getItem("jwt");
      let url = "http://localhost:8090/add"
    },
    loadProduct() {
      let id = this.$route.query.id
      let url = "http://localhost:8090/product/" + id;
      console.log("----" + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data
        this.product = responseBody.data;
        console.log(responseBody + "66666666666666666666666");
      });
    },
    insertCart() {
      let url = "http://localhost:8090/cart/add-new";
      console.log(this.product);
      let jwt = localStorage.getItem("jwt");
      const decode = this.jwt_decode(jwt);
      console.log(decode.id);
      this.cartData.userid = decode.id;
      this.cartData.productname = this.product.name
      this.cartData.productid = this.product.id;
      this.cartData.price = this.product.price;
      this.cartData.picture = this.product.url;
      if (jwt == null) {
        this.$message.error("您未登录，请先登录");
      } else {
        this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .post(url, this.cartData).then((response) => {
          let responseBody = response.data
          this.categoryList = responseBody.data;
          if (responseBody.state == 20000) {
            this.$message({
              message: '添加成功！',
              type: 'success'
            });
          } else {
            console.log(responseBody.message);
            this.$message.error(responseBody.message);
          }
        })
      }
    }
  },
  created: function () {
    this.loadProduct();
  }

}
</script>


<style scoped>
.mr-cont {
  width: 1200px;
  height: 600px;
  margin: 0px auto;
}

</style>